<template>
  <view class="box-card-body">
    <view id="detailShifuMap" class="chart"></view>
  </view>
</template>

<script>
var vk = uni.vk;
import * as echarts from "echarts";
import china from "../util/china.json";
import citys from "../util/citys.json";

export default {
  name: "detailShifuMap",
  methods: {
    init(res) {
      let allData = vk.pubfn.deepClone(citys);
      let max = 0;
      allData.map((v) => {
        let i = vk.pubfn.getListItem(res.selectRes, "_id", v.full);
        if (!i) {
          v.value = 0;
          v.pay_amount = 0;
          return;
        }
        v.value = i.count;
        v.pay_amount = i.pay_amount;
        if (i.count > max) max = i.count;
      });
      console.log(allData);
      // 渲染图表
      let myChart = echarts.getInstanceByDom(
        document.getElementById("detailShifuMap")
      );
      if (myChart == null) {
        // 如果不存在，就进行初始化。
        myChart = echarts.init(document.getElementById("detailShifuMap"));
      }
      echarts.registerMap("china", china);
      var option = {
        grid: {
          left: "1%",
          right: "1%",
          top: "1%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            if (params.data)
              return `地区：${params.data.name}\n用户数：${params.data.value}\n销售额：${params.data.pay_amount}`;
          },
        },
        visualMap: {
          type: "continuous",
          show: true,
          left: 0,
          min: 0,
          max: max ? max : 1,
          inRange: { color: ["#edfbfb", "#b7d6f3", "#40a9ed", "#3598c1"] },
          splitNumber: 1,
        },
        series: [
          {
            name: "MAP",
            type: "map",
            mapType: "china",
            selectedMode: "false",
            itemStyle: { borderColor: "#333", borderWidth: 0.2 },
            data: allData,
          },
        ],
      };
      myChart.setOption(option);
      this.$emit("comp");
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card-body {
  margin: 10px 0;
  height: 360px;
  flex: 5.8;
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>
